<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
  <title>大众点评</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="./css/element.css">
  <link href="./css/main.css" rel="stylesheet">
  <link href="./css/info.css" rel="stylesheet">
<link href="./css/hongbo.css" rel="stylesheet">


 
  <style type="text/css">
      .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2), .el-tabs--bottom .el-tabs__item.is-top:nth-child(2), .el-tabs--top .el-tabs__item.is-bottom:nth-child(2), .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
          padding-left: 30%;
		 
      }

      .el-tabs, .el-tab-pane {
          height: 100%;
      }

      .el-tabs__header {
          height: 5%;
      }

      .el-tabs__content {
          height: 100%;
      }
	   b,span{
	   
		font-family:"Times New Roman" ,Times, serif;
	  }
	  <!--在同一平行 -->
	  div{
	  white-space: nowrap
	  }
	  #bTitle{
	     align-items: center;
		font-size:10px;
	  
	  }
	

  img {
	max-width: 100%;
	max-height: 100%;
}


.timeStyle{
  font-size: 38px;
  text-shadow: 0 0 5px #fff,
                0 0 5px #fff,
                0 0 10px #fff,
                0 0 18px #126fcc,
                0 0 20px #126fcc,
                0 0 40px #126fcc;
            color: #fff;
}
.meetStyle{
background-color:black;
height:200px;
  text-shadow: 0 0 5px #fff,
                0 0 5px #fff,
                0 0 10px #fff,
                0 0 18px #126fcc,
                0 0 20px #126fcc,
                0 0 40px #126fcc;
            color: #fff;

}
	
  </style>

</head>

<body>
<div id="app">
  <div class="header">
    <div class="header-back-btn" @click="goBack"><i class="el-icon-arrow-left"></i></div>
    <div class="header-title" style="color:black" >功能大厅&nbsp;&nbsp;&nbsp;</div> 
	



  </div>
  
 <el-carousel  type="card" height="280px"  :interval="1000">
    <el-carousel-item v-for="item in imgList" :key="item.id">
     <img :src="item.src"></img>
    </el-carousel-item>
  </el-carousel>



	
	

    <div class="mess-content">
	  <div class="avatar" style="display:inline-block;margin-right:30px;margin-left:30px">
		<img src="./imgs/hongbo.png"  alt="" width="80px" height="80px" @click="centerDialogVisible = true;"/>
		<div style="color:green;margin-left:13px; font-weight:bolder;" >每日红包</div>
     </div>
	  <div class="avatar" style="display:inline-block;margin-right:30px" >
		<img src="./imgs/hongbo2.png"  alt="" width="80px" height="80px" @click="myHbMessage"/>
		<div style="color:green;margin-left:13px; font-weight:bolder;" >红包记录</div>
     </div>
	 <div class="avatar" style="display:inline-block;margin-right:30px" >  <!--display:inline-block显示在同一排-->
		<img src="./imgs/hongbo3.png"  alt="" width="80px" height="80px"  @click="myMoney"/>
		<div style="color:green;margin-left:13px; font-weight:bolder;" >我的账户</div>
     </div>
	  <div class="avatar" style="display:inline-block;margin-right:30px;margin-left:30px;margin-top:10px" @click="qiandao" >
		<img src="./imgs/qiand2.png"  alt="" width="80px" height="80px"  />
		<div style="color:green;margin-left:13px; font-weight:bolder;" >今日签到</div>
     </div>
	  <div class="avatar" style="display:inline-block;margin-right:30px;margin-top:10px" @click="memorial" >
		<img src="./imgs/HuiH/15.png"  alt="" width="80px" height="80px"  />
		<div style="color:red;margin-left:13px; font-weight:bolder;" >纪念日子</div>
     </div>
  <div class="avatar" style="display:inline-block;margin-right:30px;margin-top:10px"  >
		<img src="./imgs/talk.jpg"  alt="" width="80px" height="80px" @click="toTalkAnthor" />
		<div style="color:green;margin-left:13px; font-weight:bolder;">畅聊天室</div>
     </div>


	<el-dialog

	  title="红包一刻"
	  :visible.sync="centerDialogVisible"
	  width="100%"
	  :fullscreen="true"
	
	  center>

	    <div class="container" id="container">
        <div class="hongbao">
            <div class="topcontent">
                <div class="avatar">
                    <img src="./imgs/HuiH/13.jpg"  alt="" width="80px" height="80px"/>
                    <span id="close" ></span>
                </div>
                <h2 style="color: yellow">财神爷</h2>
                <span class="text">给你发大红包</span>
                <div class="desscription">恭喜发财 大吉大利</div>
            </div>
            <div class="chai"  id="chai" @click="openMoney">
                <span >拆红包</span>

            </div>

        </div>
	<el-switch
	  v-model="isPlay"
	  active-text="开启试玩"
	  inactive-text="关闭">
</el-switch>

 <el-progress :text-inside="true" color="green" :stroke-width="23" :percentage="percentagePlay"  :format="formatPlay"></el-progress>   
	
	</div>
		  		
	  <span slot="footer" class="dialog-footer">
		<el-button @click="centerDialogVisible = false">取 消</el-button>
		<el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
	  </span>
</el-dialog>


<el-drawer
  :title="drawerTitle"
  :visible.sync="drawer"
    :direction="direction"

  :size="size">
  
 <div v-if="this.drawerSelectWho===1">
     <textarea v-model="hbMessage" readonly name="用户历史红包记录" cols="40" rows="5" style="font-size:1.2rem"> 
	 </textarea><el-button type="success" @click="seeNow" >{{this.isSeeNow?'点击查看所有':'只看最近记录'}}</el-button><br>
  <el-select  clearable  filterable  placeholder="试玩的红包记录"  v-model="selectMessPlays" style="margin-top:20px" >  <!--clearable可以清除 filterable可以搜索-->
      <el-option v-for="(f,index) in hBNotePlays" :value="f">{{f}}</el-option>
    </el-select>
	
 </div>
 <div v-if="this.drawerSelectWho===2">
 
   <el-select  clearable  filterable  placeholder="我的账户信息"  v-model="yePlays" style="margin-top:10px;color:blue;width:70%;" >  <!--clearable可以清除 filterable可以搜索-->
      <el-option  :value="this.userInfos.hbCounts?'余额:'+this.userInfos.hbCounts+'元':'余额:'+'0元'" style="font-size:16px;color:black;font-weight:bold"></el-option>
	   <el-option   :value="this.userInfos.level?'等级VIP:'+this.userInfos.level:'VIP0'" style="font-size:15px;color:black;font-weight:bold"></el-option>
	   <el-option   :value="this.userInfos.credits?'积分:'+this.userInfos.credits+'分':'积分:0'" style="font-size:15px;color:black;"></el-option>
	    <el-option   :value="this.userInfos.followee?'关注数量:'+this.userInfos.followee:'关注:0'" style="color:grey;"></el-option>
		 <el-option   :value="this.userInfos.fans?'粉丝数量:'+this.userInfos.fans:'粉丝:0'" style="color:grey;"></el-option>
    </el-select>
  </div>
 <div v-if="this.drawerSelectWho===3" class="speciStyle">
  <div  style="height:350px">
     	<el-button  size="medium " style="width:100%;height:90%" class="meetStyle">
		<span style="font-size:18px">大一开学至今<span style="color:red">❤</span>
		<!-- </span>rare</span>  -->
		<br><br>
		
		已经 <span style="font-size:32px;margin-left:8px" >{{this.newDate}}</span><br><br>
		<div style="font-size:18px" >{{this.meetDay}}</div>
		

		</el-button>
     </div>
	   <!-- <el-select  clearable  filterable  placeholder="其他纪念信息"  v-model="yePlays" style="margin-top:10px;color:blue;width:70%;" >  <!--clearable可以清除 filterable可以搜索--> -->
	   <!-- <el-option   :value="this.toNextyear?'距离两周年还有:'+this.toNextyear:''" style="font-size:18px;color:black;"></el-option> -->
	   <!-- <el-option   :value="this.brithdayDate?'距离慧生日还有:'+this.brithdayDate:''" style="font-size:16px;color:black;"></el-option> -->
    <!-- </el-select> -->
  </div>
  </div>
</el-drawer>



     
  
 
  <foot-bar :active-btn="2"></foot-bar>
</div>


<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="./js/element.js"></script>
<script src="./js/common.js"></script>
<script src="./js/footer.js"></script>
</body>
<script>
  const app = new Vue({
    el: "#app",
    data: {
	user:'',
	yePlays:'',
	size:'60%',
	meetDay:'',
	percentagePlay:10,//试试抽红包抽取进度条
	brithdayDate: new Date(),
	toNextyear: new Date(),
	    newDate: new Date(),
	drawerTitle:'今日提醒!已经有多少天啦❤',//抽屉标题
	drawerSelectWho:3,//弹出框为谁所用
	isSeeNow:false,//是否只看今天
	 isPlay: false,//试玩红包
	selectMess:'',
	nearHbMess:'',//红包的最近记录'
	selectMessPlays:'',
	hbMessage:'',//传递的红包记录的
	   drawer: true,//抽屉初始发开
        innerDrawer: false,
	isOnce: 0,//定义是否为第一次发请求，0是 1不是
	collectHb:false,//定义的是否可以领取红包
	userInfos:[],//用户详细信息
        direction: 'ttb',
	 centerDialogVisible: false,//默认不打开
	   moneys: [],//存红包的
	   moneysPlay: [],//存试玩红包的
	   hBNotes: [],//红包的记录
	    hBNotePlays: [],//试玩的红包的记录
       countMoney:3,//拆红包的次数
      count: 5,
      isReachBottom: false,
	  
	   imgList: [
      

		{
          id:2,
          src: "./imgs/HuiH/1.jpg",
          title: "这是hh.png"
        }, 
		{
         id:3,
          src: "./imgs/HuiH/2.jpg",
          title: "这是hh.png"
        }, 
		{
          id:4,
          src: "./imgs/HuiH/3.jpg",
          title: "这是hh.png"
        },
		 {
         id:5,
          src: "./imgs/HuiH/4.jpg",
          title: "这是hh"
        }
		
      ]
	  

    },
    created() {
	this.dateFormat();
	this.queryUserInfo();//用户详细信息
	
	   this.checkLogin();//登录用户查询
	  
    },

<!-- 天 = parseInt（（秒数 / 60 / 60） / 24）
<!-- 时 = parseInt（（秒数 / 60 / 60 ）% 24） -->
<!-- 分 = parseInt（（秒数 / 60） % 60 ） -->
<!-- 秒 = parseInt（秒数 % 60 ） --> -->

// 挂载时间
mounted () {
    let that = this
    this.timer = setInterval(function () {
	//距离现在多少天了
     <!-- var mNum  = ((new Date()-new Date("2022-03-23"))/1000); //多少秒 -->
	 var mNum  = ((new Date()-new Date("2020-9-28"))/1000); //多少秒
	var toNextNum=((new Date("2024-03-23")-new Date())/1000);
	 var brithdayNum=((new Date("2024-05-01")-new Date())/1000)
	 <!-- that.brithdayDate=that.timeStamp(brithdayNum); -->
	that.newDate=that.timeStamp(mNum);
	 <!-- that.toNextyear=that.timeStamp(toNextNum); -->
	 
    },200)
},
// 销毁时清除计时器
beforeDestroy: function () {
    if (this.timer) {
      clearInterval(this.timer)
    }
},


    methods: {
	
//试试抽红包进度条
	formatPlay(){
	   if(this.percentagePlay>100){
	   this.percentagePlay=0;
	   }
	    
	   return '已试抽'+this.moneysPlay.length+'次'+this.percentagePlay+'%';
	},
	
	//调用的时间
	timeStamp(mNum){
	let day=parseInt((mNum/3600)/24);
	 var hour=parseInt((mNum/3600)%24);
	  var minutes=parseInt((mNum/60)%60);
	 var seconds = parseInt(mNum % 60 );
	   var relDay=(day+"天"+hour+"时"+minutes+"分"+seconds+"秒");
	  return relDay;
	},
	
	
	 dateFormat(){
      <!-- var date = new Date("2022-03-23") -->
	   var date = new Date("2020-9-28")
      var year = date.getFullYear()
      var month = date.getMonth() + 1 < 10 ? 
                    '0' + (date.getMonth() + 1) : date.getMonth()+ 1
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      // var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      // var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      // var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
       this.meetDay= (year + '年' +month + '月' + day+'日');
    },
	
	//我的钱包
	myMoney(){
	this.drawer = true;
	this.drawerSelectWho=2;
		this.size='60%';
		this.direction='ltr';
	this.drawerTitle='我的钱包'
	
	},
	//我的红包信息
	myHbMessage(){
	this.drawer = true;
	this.drawerSelectWho=1;
	this.direction='ttb';
	this.size='55%';
	this.drawerTitle='所有的红包记录'
	
	},
	//纪念日
	memorial(){
	this.drawer = true;
	this.drawerSelectWho=3;
	this.direction='ttb';
	this.size='60%';
	this.drawerTitle='所有纪念日子'
	},
	
	//其他功能
	otherGn(){
	this.$message({
			  message: '功能开发中!',
			  type: 'warning'
			}) 
	
	},
	
	 handleClose(done) {
    
            done();
      
    },
	clickHbNow(){

	this.drawerSelectWho=1;//让下拉框为1，选择红包记录
	this.queryUserInfo();//用户详细信息 
	console.log("%%%%%%%5"+this.drawerSelectWho)
	},

   //看现在的记录
	seeNow(){
	this.isSeeNow=!this.isSeeNow;
	
	if(this.isSeeNow){
		this.hbMessage=this.nearHbMess;
	}else{
	
	this.queryUserInfo();//用户详细信息
	
	}
	
	},
	qiandao(){
	
	this.$message({
			  message: '签到成功积分+10',
			  type: 'success'
			}) 
	
	},

	
	 //打开红包
            openMoney() {
			  if(!this.isPlay){//不是试玩才要判断
			  if(this.user==''){
			      this.$message({
						  message: '未登录不允许真抽,请点试玩或登录',
						  type: 'error',
						  duration: 1500
						})
               return ;						
			  }
			  console.log("真玩红包")
				if(!this.compareQian()){ 
				  if(!this.collectHb){
				    this.$message({
						  message: '你在'+(this.userInfos.hbCreateTime)+'已经领取过3次,不要贪心哦！',
						  type: 'error',
						  duration: 1000
						}) 
				   return;
				  }
				 return;		
				}
			}
			    
				if(!this.isPlay){//试玩红包不计入
                if (this.moneys.length==3){
						this.$message({
							message: '今日已领3次了,明日再来',
							type: 'error',
							duration: 1000
							 })	 			 
					if(this.isOnce===0){//当一次也没发过时
					console.log("发送了一次请求")
					   axios({
						headers: {
								   'Content-Type': 'application/json; charset=utf-8'
							   },
						 method: 'post',
						url:'/userInfo/updateUserInfo',
						data: {hbCounts:JSON.stringify(this.moneys),
						      hbRecord:JSON.stringify(this.hBNotes)}
						} )
						
						 .then(({data})=>{
						this.queryUserInfo();//更新数据
							this.once=1;//修改为发过一次
					})
					
					}
					return;
				 }
				}
				
			   this.$confirm((this.isPlay?'试玩中':'真实拆')+",你确定要拆红包?", '提示', {
                    confirmButtonText: '拆',
                    cancelButtonText: '不拆',
                    type: 'warning',
					offset: 10,
					center: true
                }).then(() => {
                    this.creatMoney();
                    this.$message({
                        type: 'success',
                        message: '恭喜你在'+((this.isPlay?'试玩':'真实拆'))+'中,抢到'+(this.isPlay?this.moneysPlay[0]:this.moneys[0])+"元子",
						duration: 900
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消拆'
                    });
                })
				 
             
            },
            //创建红包金额
            creatMoney(){
			if(this.isPlay){//试玩红包
			this.percentagePlay+=5;
			 var money=   parseFloat((Math.random()*10000)).toFixed(2)//小数点后两位。四舍五入
            
                // this.moneys.push(11)往结尾加
		      this.moneysPlay.unshift(money);
				this.hBNotePlays.push(this.getTime()+"试玩红包中获得红包:"+money+"元")
			    
			
			
			}else{
			
               this.countMoney--;
                 var money2=   parseFloat((Math.random()*100)).toFixed(2)//小数点后两位。四舍五入
                // this.moneys.push(11)往结尾加
		 	   
                this.moneys.unshift(money2);
				this.hBNotes.push(this.getTime()+"获得红包:"+money2+"元")
			   
		
			 }   
            },
      load() {
        this.count += 2;
      },
	  
	  //判断是否可以签到
		compareQian(){
		
		　　let yy = new Date().getFullYear();
		　　let mm = new Date().getMonth()+1+"";
		　　let dd = new Date().getDate()+"";
		if(dd.length<2){
		  dd="0"+dd;
		}
		if(mm.length<2){
		  mm="0"+mm;
		}
		　var times = yy+'-'+mm+'-'+dd;
		if(this.userInfos==''||this.userInfos==null){//不存在，则可以直接领
	         this.collectHb=true;//可以领取
		     return true;
		
		
		}
	     var beforeTime=(this.userInfos.hbCreateTime+"").substring(0,10);
		 console.log("a"+times);
		  console.log("b"+beforeTime);
		  if(times===beforeTime||beforeTime==''){
		 console.log("不可以领取");
		  this.collectHb=false;
		  }else{
		   console.log("可以领取");
		   this.collectHb=true;//可以领取
		     return true;
		  }
		  return false;
		},
	  
	  //查询用户详细info
	  	  queryUserInfo(){
	     axios.get("/userInfo/queryById")
		 .then(({data})=>{
		    this.userInfos=data;
		   
			  this.compareQian();//等这个用户加载详细结束后调用是否可以签到
			  if(!this.userInfos==''||!this.userInfos==null){
		     this.hbMessage=this.userInfos.hbRecord;//红包记录
			var arr=this.hbMessage.split("[");
			this.nearHbMess=arr[1];//最新记录
			} 
		 })
	  },
	   
  
      goBack() {
        history.back();
      },
     //获取时间
    getTime(){
	  var date1=new Date();
       var year=date1.getFullYear();
       var month=date1.getMonth()+1;
       var day=date1.getDate();
       var hours=date1.getHours();
       var minutes=date1.getMinutes();
       var seconds=date1.getSeconds();
       return year+"年"+month+"月"+day+"日"+hours+":"+minutes+":"+seconds
	
	},
	//查询登录用户
	 checkLogin() {
        // 查询用户信息
        axios.get("/user/me")
        .then(({data}) => {
		

          this.user = data;
		  	console.log("图标是"+this.user.icon);
        })
		
	},
     
    
     
      onScroll(e) {
        let scrollTop = e.target.scrollTop;
        let offsetHeight = e.target.offsetHeight;
        let scrollHeight = e.target.scrollHeight;
        if (scrollTop === 0) {
          // 到顶部了，查询一次
          this.queryBlogsOfFollow(true);
        } else if (scrollTop + offsetHeight + 1 > scrollHeight && !this.isReachBottom) {
          this.isReachBottom = true
          // 再次查询下一页数据
          this.queryBlogsOfFollow();
        } else {
          this.isReachBottom = false
        }
      },
	  //跳转其他用户界面
      toOtherInfo(f,a){
        if(f.userId==this.user.id){
          location.href = "/info.html"
        }else  if(f.messId!=null) {
          location.href = "/other-info.html?id=" + f.messId
        }else  if(a==1) {
          location.href = "/other-info.html?id=" + f.sendId//前面设置好的，会传入（f,1）
        }
		else   {
          location.href = "/other-info.html?id=" + f.userId
        }
      },
	 
      toBlogDetail(f) {
        location.href = "/blog-detail.html?id=" + f.blogId
      },
	   toTalkAnthor() {
	   if(this.user.nickName===''||this.user.nickName==null){
	    this.$message({
						  message: '你未登录，登录后在进入',
						  type: 'error',
						  duration: 1000
						}) 
						
						return;
	   
	   }
        location.href = "/websocket1.html?name="+ this.user.nickName+"&icon="+this.user.icon
      }
    },

  })
</script>
</html>